<html lang="en">
<!--#include file="/include/head.html"-->
<body>
<!--#include file="/include/top.html"-->
<div class="container">
    <div class="content-wrap">
        <div class="content article">
            <header class="article-header">
                <h1 class="article-title">
                    <a href="" id="article_title"></a>
                </h1>
                <div class="meta">
                    <span class="time"><i class="fa fa-clock-o"></i><span id="article_time">2019-01-01</span></span>
                    <span class="tag"><i class="fa fa-folder-o"></i>分类：<a href="" id="article_tag"></a></span>
                    <span class="view"><i class="fa fa-eye"></i>阅读(<span id="article_view">0</span>)</span>
                    <span class="commont"><i class="fa fa-comments-o"></i>评论(<span id="article_commont_num">0</span>)</span>
                </div>
            </header>
            <div class="markdown-body" id="article_content">

            </div>
            <div class="copy-right">
                <div class="markdown-body">
                    <blockquote>
                        本文作者 : 吕梁山 <br>
                        原文链接 : <a href="" id="copy_right_href">/</a><br>
                        版权声明 : 本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC
                        BY-NC-SA 4.0</a> 许可协议。转载请注明出处！
                    </blockquote>
                </div>
            </div>
            <div class="article-navigation">
                <div class="nav-pre">
                    <i class="fa fa-angle-left"></i>
                    上一篇:
                    <a href="" target="_self" id="article_pre"></a>
                </div>
                <div class="nav-next">
                    下一篇:
                    <a href="" target="_self" id="article_next"></a>
                    <i class="fa fa-angle-right"></i>
                </div>
            </div>
        </div>
        <div class="content article">
            <div class="comment-title">
                <i class="fa fa-comment"></i> 给予建议(评论:<span class="comment-num">10</span>)
            </div>
            <div class="article-comnent">
                <div class="new-comment">
                    <form id="commentForm" method="post">
                        <input type="hidden" id="article_id">
                        <input type="hidden" id="reply_to">
                        <div class="vheader item3">
                            <input name="nick" id="user_name" placeholder="昵称" class="article-input" type="text">
                            <input name="mail" id="user_email" placeholder="邮箱" class="article-input" type="email">
                            <input name="link" id="user_link" placeholder="网址(http://)" class="article-input" type="text">
                        </div>
                        <div class="article-edit">
                            <textarea id="commentContent" class="article-input edit" placeholder="正确填写邮箱, 才能及时收到回复哦♪(^∇^*)"></textarea>
                        </div>
                        <div class="article-button">
                            <button type="button" class="btn" onclick="addArticleComment()">回复</button>
                        </div>
                    </form>
                </div>
                <div class="comment-list">

                </div>
            </div>
        </div>
    </div>
    <!--#include file="/include/right.html"-->
</div>
<!--#include file="/include/footer.html"-->
</body>
<script>
    var articleId = GetQueryString("id");
    loadArticle();
    loadArticleComment(1);

    function loadArticle() {
        var para = {
            id: articleId
        };
        loadPostServer("/api/article/getArticle", para, function (data) {
            var $articleTitle = $("#article_title");
            $articleTitle.html(data.articleTitle);
            $articleTitle.attr('href','/article/article.html?id=' + data.id);
            $("#article_time").html(data.createDate);
            $("#article_view").html(data.articleViews);
            $("#article_commont_num").html(data.commentNum);
            $(".comment-num").html(data.commentNum);
            $("#article_content").html(marked(data.articleContent));
            $("#article_tag").html((data.articleTypeName));
            var $copyRightHref = $("#copy_right_href");
            $copyRightHref.html(window.location.href);
            $copyRightHref.attr('src', window.location.href);
            $("#article_id").val(data.id);
        })
    }

    function loadArticleComment(pageNumber) {
        var para = {
            articleId: articleId,
            pageNumber: pageNumber
        };
        loadPostServer("/api/article/getArticleCommentPage", para, function (data) {
            var articleOneHtml = "";
            var list = data.list;
            for (var i = 0; i < list.length; i++) {
                articleOneHtml += '<div class="comment-one"><div class="comment-head-img">';
                articleOneHtml += '<img alt="' + list[i].user.userName + '" src="/static/image/userHead/' + list[i].user.userImg + '">';
                articleOneHtml += '</div><div class="comment-content"><div class="comment-info">';
                articleOneHtml += '<span class="comment-author"><a>' + list[i].user.userName + '</a></span>发表于<span class="comment-time">' + list[i].showDate + '</span>';
                articleOneHtml += '<a class="comment-reply" onclick="replyComment(' + list[i].id + ',\''+ list[i].user.userName+'\')"><i class="fa fa-reply"></i></a></div>';
                articleOneHtml += '<div class="comment-detail markdown-body">';
                if (list[i].type === 2) {
                    articleOneHtml += '<blockquote>';
                    articleOneHtml += '<p><a class="user-mention" href="' + list[i].reply.user.userLink + '">@' + list[i].reply.user.userName + '</a>';
                    articleOneHtml += '<br>' + list[i].reply.content + '</p>';
                    articleOneHtml += '</blockquote>';
                }
                articleOneHtml += list[i].content;
                articleOneHtml += '</div></div></div>';
            }
            $(".comment-list").html(articleOneHtml);
        })
    }

    function addArticleComment() {
        var articleId = $("#article_id").val();
        var replyTo = $("#reply_to").val();
        var userName = $("#user_name").val();
        var userEmail = $("#user_email").val();
        var userLink = $("#user_link").val();
        var content = $("#commentContent").val();
        var para = {
            articleId : articleId,
            replyTo : replyTo,
            userName : userName,
            userEmail : userEmail,
            userLink : userLink,
            content : content
        };
        loadPostServer("/api/article/addArticleComment", para, function (data) {
            if(data.code === 0){
                window.location.reload();
            }
        })
    }

    function replyComment(replyTo,userName){
        $("#reply_to").val(replyTo);
        var $commentContent = $("#commentContent");
        $commentContent.attr('placeholder','@' + userName);
        $commentContent.focus();
    }
</script>
</html>